<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 160px;
				height: 160px;
				background-color: yellow;
				overflow: auto;
			}
			#box2{
				width: 80px;
				height: 300px;
				background-color:greenyellow;
				
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var btn01=document.getElementById("btn01");
				var box1=document.getElementById("box1");
				btn01.onclick=function(){
					console.log("滚动区域高度"+box1.scrollHeight);
					console.log("垂直滚动条滚动距离"+box1.scrollTop);
				}
			/*滑动到底才能点击已阅读和注册*/
				var inputs=document.getElementsByTagName("input")
				box1.onscroll=function(){
					if(box1.scrollHeight-box1.scrollTop==box1.clientHeight){
						inputs[0].disabled=false;/*disabled设置为false则可以用*/
						inputs[1].disabled=false;
					}
				}
			}
		</script>
	</head>
	<body>
		<button id="btn01">样式</button>
		<div id="box1">
			<div id="box2">
			</div>
		</div>
		<input type="checkbox" disabled="disabled"/>我已阅读并同意所有条款<!--disabled禁用-->
		<input type="submit" value="注册" disabled="disabled"/>
	</body>
</html>
